<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PDA扫描入库</title>
<script src="${ctx}/resources/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<style type="text/css">
body {
	font-size: 14px;
	line-height: 20px;
}

.batchInfo {
	color: blue;
}

.numLeft {
	font-weight: bold;
	color: red;
	font-size: 14px;
}
</style>
</head>
<body onload="init()">
	<c:if test="${fn:length(batchList) > 0 }">
		<div class="bar">
			<form id="dataForm" action="${ctx }/wap/pda/pdaStore" method="post">
				<table width="100%">
					<thead>
						<tr>
							<td style="color: blue;">
								<b>入库管理</b>
								<a href="${ctx}/wap/pda.jsp">返回</a>
								<hr />
							</td>
						</tr>
					</thead>
					<tr>
						<td colspan="3" style="color: blue;">${msg }</td>
					</tr>
					<tr>
						<td colspan="3">
							入库单：
							<select onchange="batchChange()" id="batch" name="batchId" style="width: 100%;">
								<c:forEach items="${batchList }" var="batch" varStatus="index">
									<option value="${batch.id }" <c:if test="${inBatch.id == batch.id }">
								selected
								</c:if>>${index.index + 1}.${batch.batchCode}</option>
								</c:forEach>
							</select>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							二维码：
							<input style="width: 100%;" name="qrCode" id="qrCode" type="text" />
							<input type="button" onclick="clearQr()" value="清除">
							<input type="submit" value="提交">
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<c:forEach items="${batchList }" var="batch" varStatus="index">
								<div name="batchInfo" class="batchInfo" style="display: none" id="batch${batch.id }">
									${index.index + 1}.共 ${batch.numOfMarchandise } ${batch.marchandise.packageing} (${batch.numOfBox}件)还剩
									<span class="numLeft">${batch.numOfMarchandise - batch.numOfMarchandiseHasDone }</span>
									${batch.marchandise.packageing} (<fmt:formatNumber pattern="###,###.00">${batch.numOfBox - batch.numOfBoxHasDone}</fmt:formatNumber> 件) 需录入 - 规格：${batch.marchandise.spcification }- ${batch.marchandise.name }
								</div>
							</c:forEach>
							<hr />
							<input type="button" id="clearAll" value="清空并重新录入">
						</td>
					</tr>
				</table>
			</form>
			<script type="text/javascript">
				function init() {
					batchChange();
					$("#qrCode").focus();
				}
				function batchChange() {
					var batch = document.getElementById("batch");
					var batchId = batch.value;
					$(".batchInfo").hide();
					$("#batch" + batchId).show();
				}
				function clearQr() {
					var qrCode = document.getElementById("qrCode");
					qrCode.value = "";
					qrCode.focus();
				}
				$(function() {
					$("#clearAll").click(function() {
						$("#dataForm").attr("action", "${ctx }/wap/pda/clearStoreData");
						$("#dataForm").submit();
					});
					$("#qrCode").focus();
				});
			</script>
	</c:if>
	<c:if test="${fn:length(batchList) < 1 }">
	暂无入库单，<a href="${ctx}/wap/pda.jsp">返回</a>！
	</c:if>
</body>
</html>